<template>
    <div style="background-color: #F6F6F6">
        <div id="QuestionStatistics" :style="{width: '1300px', height: '650px'}"></div>
    </div>
</template>

<script>
    import * as echarts from 'echarts'
    export default {
        name: "QuestionStatistics",
        mounted(){
            this.drawChart()
        },
        methods: {
            drawChart() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('QuestionStatistics'))
                // 绘制图表
                setTimeout(function () {
                myChart.setOption({
                    title: {
                        left: 'center',
                        text: '疫情问卷答题情况',
                        textStyle: {
                            fontSize: 20
                        }
                    },
                    legend: {
                        top:20,
                        right:0
                    },
                    tooltip: {
                        trigger: 'axis',
                        showContent: false
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            mark: { show: true },
                            magicType: { show: true, type: ['bar', 'stack'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    dataset: {
                        source: [
                            ['product', '问题1', '问题2', '问题3', '问题4', '问题5', '问题6'],
                            ['A', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
                            ['B', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
                            ['C', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
                            ['D', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
                        ]
                    },
                    xAxis: { type: 'category' },
                    yAxis: { gridIndex: 0 },
                    grid: { top: '55%' },
                    series: [
                        {
                            type: 'line',
                            smooth: true,
                            seriesLayoutBy: 'row',
                            emphasis: { focus: 'series' }
                        },
                        {
                            type: 'line',
                            smooth: true,
                            seriesLayoutBy: 'row',
                            emphasis: { focus: 'series' }
                        },
                        {
                            type: 'line',
                            smooth: true,
                            seriesLayoutBy: 'row',
                            emphasis: { focus: 'series' }
                        },
                        {
                            type: 'line',
                            smooth: true,
                            seriesLayoutBy: 'row',
                            emphasis: { focus: 'series' }
                        },
                        {
                            type: 'pie',
                            id: 'pie',
                            radius: '30%',
                            center: ['50%', '25%'],
                            emphasis: {
                                focus: 'self'
                            },
                            label: {
                                formatter: '{b}: {@2012} ({d}%)'
                            },
                            encode: {
                                itemName: 'product',
                                value: '2012',
                                tooltip: '2012'
                            }
                        }
                    ]
                });
                myChart.on('updateAxisPointer', function (event) {
                    const xAxisInfo = event.axesInfo[0];
                    if (xAxisInfo) {
                        const dimension = xAxisInfo.value + 1;
                        myChart.setOption({
                            series: {
                                id: 'pie',
                                label: {
                                    formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                                },
                                encode: {
                                    value: dimension,
                                    tooltip: dimension
                                }
                            }
                        });
                    }
                });
                });
                }
        }
    }
</script>

<style scoped>

</style>